﻿<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">

<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/toastr.css">

<script type="text/javascript" src="../ActivityCommon/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/zepto.js"></script>
<script type="text/javascript" src="./js/toastr.js"></script>
<script type="text/javascript" src="./js/rdcp.toastr.js"></script>
<script type="text/javascript" src="./js/kinerLottery.js"></script>
<script type="text/javascript" src="../../gmmcActivity/ActivityCommon/js/acivityCommon.js"></script>

<title>"燃"放"11" "FUN"肆购车季</title>

</head>

<body>
	<div class="draw_box">
		<img src="./images/draw_bj1.png">
		<div id="box" class="box" data-deg="0" style="height: 24rem;">
			<div class="outer KinerLottery KinerLotteryContent" style="transition: none; transform: rotate(360eg);">
				<img src="./images/lanren.png" style="width: auto;">
			</div>
			<!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态，js会根据这3个class进行匹配状态 -->
			<div class="inner  start doing" id="KinerLotteryBtn" style="height: 8rem;"></div>
			<div class="content">
				<div class="title">
					<img src="images/hdgz.png">
				</div>
				<div class="content_text" style="background: #ee7b1d;">
					<p>1. 活动期间(2017年11月1号-2017年11月30号)购买广汽三菱指定车型即可参与抽奖一次。（同一手机号码、同一车辆仅参与一次抽奖）</p>
					<p>2. 活动奖项设置：一等奖4999元；二等奖3000元；三等奖1000元。（中奖后自动以积分形式体现在个人中心积分上 1元=1积分）</p>
					<p>3. 积分使用方式：（可多次使用，用完为止）
					<p>
						<img src="images/01.png" alt="01">
						车主积分可在广汽三菱销售服务店进行等额消费（包括：精品加装、保养、维修等）
					</p>
					<p>
						<img src="images/02.png" alt="02">
						可在服务号上的积分商城兑换任意等额礼品。
					</p>
					<p>请注意：积分自用户注册之日起，每两年重置清零。</p>
				</div>
				<div class="btn" id="my_lz">
					<img src="images/btn1.png" alt="" width="200">
				</div>
			</div>
		</div>
		<div class="tc" id="tc" style="display: none">
			<div class="tc_jb">
				<form action="" class="fonrm">
					<div class="form_name">
						<label>姓 名:</label>
						<input type="text" id="dealerName" style="width: 160px;">
						<span id="bt">必填</span>
					</div>
					<div class="form_name">
						<label>手机号:</label>
						<input type="text" id="dealerphone" style="width: 160px;">
						<span id="bt1">必填</span>
					</div>
					<div class="form_name yzmmsg">
						<label>验证码:</label>
						<input type="text" id="vaildmsg" style="width: 120px;">
						<span class="obtain" style="width:auto;">点击获取验证码</span>
					</div>
					<div id="editinput" style="display: none">
						<div class="form_name ">
							<label>省份:</label>
							<input type="text" id="provinceinput" disabled="disabled">
						</div>
						<div class="form_name ">
							<label>城市:</label>
							<input type="text" id="cityinput" disabled="disabled">
						</div>
						<div class="form_name ">
							<label>经销商:</label>
							<input type="text" id="dealerinput" disabled="disabled">
						</div>
					</div>

					<div id="selectdiv">
						<div class="form_name">
							<label>省 份：</label>
							<select id="province" name="selse" class="selse">
								<option value="">----请选择-----</option>
							</select>
							<span>
								<img src="./images/un.png" alt="" width="10">
							</span>
						</div>
						<div class="form_name">
							<label>城 市：</label>
							<select id="city" name="selse" class="selse">
								<option value="">----请选择-----</option>
							</select>
							<span>
								<img src="./images/un.png" alt="" width="10">
							</span>
						</div>
						<div class="form_name">
							<label>经销商:</label>
							<select id="dealer" name="selse" class="selse">
								<option value="">----请选择-----</option>
							</select>
							<span>
								<img src="./images/un.png" alt="" width="10">
							</span>
						</div>
					</div>
					<input type="hidden" id="dxmsg" class="dxmsg">
					<span id="address" style="width:80%;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;padding: 0 25px;color: red;">地址:</span>
					<button class="tc_but">
						<img src="./images/tc_but.png" alt="" width="150" id="but_img">
					</button>
					<div id="hiddenDiv"></div>
				</form>
			</div>

			<div class="reveal-modal-bg" style="display: block; cursor: pointer;"></div>

		</div>

	</div>
	<script>
		//获取验证码
		function getCode(){
			//验证手机
			var phone = $('#dealerphone').val();
			if (phone == null || phone == "") {
				toastrInfoMessage("手机号码不能为空");
				return false;
			}
			if (!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(phone))) {
				toastrInfoMessage("手机格式不正确");
				return false;
			}
			
			if ($(".obtain").text() == "点击获取验证码") {
				
				//var url = "http://localhost:9013/pointActivity/api/v1/sendMsg";
				var url = rootPath + "/pointActivity/api/v1/sendMsg";
				
				var sendData = {"phone":phone};
				
				myAjax.myRequestNotLoadding(url,sendData,"POST",false,function(data){
					if (data.returnCode != "" && data.returnCode != null && data.returnCode == 0) {
						$('#dxmsg').val(data.msgnum);
						toastrInfoMessage(data.returnstatus);
						countDown(60);
						seconds = 60;
					} else {
						toastrInfoMessage(data.returnstatus);
					}
				},null,null,false);
			}
		}
		
		function custData(){
			//var url = "http://localhost:9013/pointActivity/api/v1/queryTmkeep";
			var url = rootPath + "/pointActivity/api/v1/queryTmkeep";
			
			//加载以前录入的信息
			myAjax.myRequestNotLoadding(url,null,"POST",false,function(data){
				console.log(data);
				$(".form_name.yzmmsg").hide();
				$("#selectdiv").hide();
				$("#editinput").show();
				
				$("#dealerName").val(data.dealerName);
				$("#dealerphone").val(data.phone);
				$("#provinceinput").val(data.province);
				$("#cityinput").val(data.city);
				$("#dealerinput").val(data.dealerCode);
				$("#address").html("地址:" + data.vin);
				
				$('#dealerName').attr("disabled", true);
				$('#dealerphone').attr("disabled", true);
				
				$('#but_img').attr("src","./images/un_tc_but.png");
				$('.tc_but').attr("disabled", true);
				
				$("#bt").hide();
				$("#bt1").hide();
				
			},null,null,false);
		}
		
		function loadProvince(){
			
			//var url = "http://localhost:9013/pointActivity/api/v1/getProvince";
			var url = rootPath + "/pointActivity/api/v1/getProvince";
			
			myAjax.myRequestNotLoadding(url,null,"POST",false,function(data){
				$.each(data,function(i,obj){
					$("#province").append("<option value='" + obj.regionCode + "'>" + obj.regionName + "</option>");
				});
			},null,null,false);
		}
		
		function loadCity(){
			$("#city option:not(:first)").remove();
			$("#dealer option:not(:first)").remove();
			var regionCode = $("#province").val();
			if (null != regionCode && "" != regionCode) {
				
				//var url = "http://localhost:9013/pointActivity/api/v1/getCity";
				var url = rootPath + "/pointActivity/api/v1/getCity";
				
				var sendData = {"regionCode":regionCode};
				
				myAjax.myRequestNotLoadding(url,sendData,"POST",false,function(data){
					$.each(data,function(i,obj){
						$("#city").append("<option value='" + obj.regionCode + "'>" + obj.regionName + "</option>");
					});
				},null,null,false);
			}
		}
		
		function loadDealer(){
			$("#dealer option:not(:first)").remove();
			var regionCode = $("#city").val();
			if ("" != regionCode) {
				
				//var url = "http://localhost:9013/pointActivity/api/v1/getDealer";
				var url = rootPath + "/pointActivity/api/v1/getDealer";
				
				var sendData = {"regionCode":regionCode};
				
				myAjax.myRequestNotLoadding(url,sendData,"POST",false,function(data){
					var html = "";
					$.each(data,function(i,obj){
						console.log(obj);
						$("#dealer").append("<option value='" + obj.dealerCode + "'>" + obj.dealerName + "</option>");
						html += "<input type='hidden' id='" + obj.dealerCode + "_inp' value='" + obj.detailAddress + "'/>";
					});
					$("#hiddenDiv").html(html);
				},null,null,false);
			}
		}
		
		function loadAddress(){
			$("#address").html("地址:" + $("#" + $("#dealer").val() + "_inp").val());
		}
		
		function initCountDown(){
			//var url = "http://localhost:9013/pointActivity/api/v1/queryMsgSencond";
			var url = rootPath + "/pointActivity/api/v1/queryMsgSencond";
			//验证验证码有效性
			myAjax.myRequestNotLoadding(url,null,"POST",false,function(data){
				if(data.senconds != "" && data.senconds != null && data.senconds < 0){
					$('#dxmsg').val(data.msgnum);
					countDown(Math.abs(data.senconds));
					seconds = Math.abs(data.senconds);
					$("#dealerphone").val(data.msgphone);
					$(".obtain").unbind();
				} else {
					$('.obtain').attr("onclick" ,"getCode()");
				}
				/* if (data.senconds != "" && data.senconds != null && data.senconds > 0) {
					$('#dxmsg').val(data.msgnum);
					var lastsend = data.senconds;
					settime(100);
					//time($('.obtain'), lastsend);
					// time(this);
				} */
			},null,null,false);
		}
		
		var t = 0;
		var seconds = 0;
		
		function countDown(seconds){
			var timer = setTimeout("countDown(seconds--)", t);
			t = 1000;
			$(".obtain").html("重新获取(" + seconds + ")");
			if (seconds == 0) {
                clearTimeout(timer);
                $(".obtain").html("点击获取验证码");
            }
		}
		
		$(document).ready(function(){
			
			initCountDown();
			
			custData();
			
			loadProvince();
			
			$("#province").change(function() {
				loadCity();
			});
			
			$("#city").change(function() {
				loadDealer();
			});
			
			$("#dealer").change(function(){
				loadAddress();
			});
			
		});
		
		
		$('#my_lz').bind('click', function() {
			$('.tc').show();
			$('.reveal-modal-bg').bind('click', function() {
				$('#tc').hide();
			});
		});

 		//意向按键点击事件.pic submit-btn auto >img
		$(".tc_but").bind('click', function() {
			var province = $("#province").val();
			var city = $("#city").val();
			var dealerCode = $("#dealer").val();
			var dxmsg = $('#dxmsg').val();
			var vaildmsg = $('#vaildmsg').val();

			//验证手机
			var phone = $('#dealerphone').val();
			var dealerName = $('#dealerName').val();
 			if (dealerName == null || dealerName == "") {
				toastrInfoMessage("姓名不能为空");
				return false;
			}
			if (phone == null || phone == "") {
				toastrInfoMessage("手机不能为空");
				return false;
			}
			if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))) {
				toastrInfoMessage("手机格式不正确");
				return false;
			}
			if (province == "") {
				toastrInfoMessage("请选择省份");
				return false;
			}
			if (city == "") {
				toastrInfoMessage("请选择城市");
				return false;
			}
			if (dealerCode == "") {
				toastrInfoMessage("请选择经销商");
				return false;
			}
			if (vaildmsg == null || vaildmsg == "") {
				toastrInfoMessage("请输入短信验证码");
				return false;
			}
			if (vaildmsg != dxmsg) {
				toastrInfoMessage("输入的验证码不正确,请稍后再试");
				return false;
			}

			var param = {
				"province" : province,
				"city" : city,
				"dealerCode" : dealerCode,
				"dealerName" : dealerName,
				"phone" : phone
			};

			save(param);
			
		});
		
		function save(param) {
			$('.tc_but').attr("disabled",true);
			
			//var url = "http://localhost:9013/pointActivity/api/v1/saveTmKeep";
			var url = rootPath + "/pointActivity/api/v1/saveTmKeep";
			
			myAjax.myRequest(url, param, null, null, function(data) {
				if (data.errorMs != null && data.errorMs != "" && data.errorMs != undefined) {
					toastrInfoMessage(data.errorMs);
				} else if (data.infoMsg != undefined && data.errorMs != "" && data.infoMsg != null) {
					toastrSuccessMessage(data.infoMsg);
					$('#tc').hide(1000);
				}
			});
		}
		
		/**
		 * 根据转盘旋转角度判断获得什么奖品
		 * @param deg
		 * @returns {*}
		 */

		var whichAward = function(deg) {
			if ((deg > 315 && deg <= 360) || (deg > 0 && deg <= 45)) {
				return "一等奖4999元";
			} else if ((deg > 45 && deg <= 135)) {
				return "三等奖1000元";
			} else if (deg > 135 && deg <= 225) {
				return "二等奖3000元";
			} else if (deg > 225 && deg <= 315) {
				return "感谢参与";
			}
		}
		var KinerLottery = new KinerLottery({
			rotateNum : 8, //转盘转动圈数
			body : "#box", //大转盘整体的选择符或zepto对象
			direction : 0, //0为顺时针转动,1为逆时针转动
			disabledHandler : function(key) {
				//                switch (key) {
				//                    case "noStart":
				//                        toastrErrorMessage("活动尚未开始");
				//                        break;
				//                    case "completed":
				//                        toastrErrorMessage("活动已结束");
				//                        break;
				//                }
			}, //禁止抽奖时回调
			clickCallback : function() {

				var roatenum;
				//                var url = "http://localhost:9002" + "/pointActivity/api/v1/startLottery";
				var url = rootPath + "/pointActivity/api/v1/startLottery";
				myAjax.myRequest(url, null, null, null, function(data) {
					if (data.errorMs != undefined || data.errorMs != null) {
						toastrInfoMessage(data.errorMs, "错误提示");
						return;

					} else {
						if (data.hasprize != null && data.hasprize == 1) {
							var prizemsg = "";

							if (data.prizelevel == 1) {
								//                                        prizemsg = "恭喜您获得一等奖,将获得"+data.prizepoint+"积分";
								roatenum = Math.round(initRandom(320, 360));

							} else if (data.prizelevel == 2) {
								//                                        prizemsg = "恭喜您获得二等奖,将获得"+data.prizepoint+"积分";
								roatenum = Math.round(initRandom(140, 225));
							} else if (data.prizelevel == 3) {
								//                                        prizemsg = "恭喜您获得三等奖,将获得"+data.prizepoint+"积分";
								roatenum = Math.round(initRandom(50, 135))
							}
						} else {
							roatenum = Math.round(initRandom(230, 315))
						}
						var b = Math.floor(360 - roatenum);
						KinerLottery.goKinerLottery(b);
					}
				});

			}, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面
			KinerLotteryHandler : function(deg) {

				if (deg > 225 && deg <= 315) {
					toastrInfoMessage('很遗憾，您没有中奖，感谢对广汽三菱的关注');
				} else {
					toastrSuccessMessage("恭喜您获得：" + whichAward(deg));
				}

			} //抽奖结束回调
		});
	</script>
</body>
</html>
